<template>
	<div class="share-page">
		<el-breadcrumb separator=">">
			<el-breadcrumb-item>订单管理</el-breadcrumb-item>
			<el-breadcrumb-item :to="{ path: '/abnormal' }">微信商户投诉</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="abnormal-page">
			<!-- 搜索条件 -->
			<el-form style="width:100%;display:flex;flex-wrap:wrap;">
				<el-form-item label="投诉日期" style="margin-left:20px">
					<el-date-picker type="date" placeholder="请输入投诉日期" style="width: 180px;" :suffix-icon="CaretBottom" />
				</el-form-item>
				<el-form-item label="订单号" style="margin-left:20px">
					<el-input placeholder="请输入订单号"></el-input>
				</el-form-item>
				<el-form-item label="支付渠道流水号" style="margin-left:20px">
					<el-input placeholder="请输入支付渠道流水号"></el-input>
				</el-form-item>
				<el-form-item label="订单类型" style="margin-left:20px">
					<el-button round color="#0071bb">全部</el-button>
					<el-button round>零售柜</el-button>
					<el-button round>提货柜</el-button>
				</el-form-item>
				<el-form-item label="处理状态" style="margin-left:20px">
					<el-button round color="#0071bb">待处理</el-button>
					<el-button round>处理中</el-button>
					<el-button round>处理完成</el-button>
				</el-form-item>
				<el-form-item style="margin-left:20px">
					<el-button round :icon="Search" color="#0071bb">查询</el-button>
					<el-button round :icon="RefreshLeft">重置</el-button>
					<el-button round :icon="Refresh">刷新</el-button>
				</el-form-item>
			</el-form>
			<!-- 表格数据 -->
			<div class="tables">
				<el-table :data="tableData" style="">
					<el-table-column prop="id" label="序号" width="80px" />
					<el-table-column prop="time" label="投诉日期" />
					<el-table-column prop="desc" label="投诉描述" />
					<el-table-column prop="tel" label="投诉人电话" />
					<el-table-column prop="handle_time" label="处理日期" />
					<el-table-column prop="status" label="处理状态">
						<template #default="scope">
							<span style="color: #FF0000;" v-if="scope.row.status == '待处理'">{{scope.row.status}}</span>
							<span style="color: #0071BB;" v-if="scope.row.status == '处理中'">{{scope.row.status}}</span>
							<span style="color: #808080;" v-if="scope.row.status == '处理完成'">{{scope.row.status}}</span>
						</template>
					</el-table-column>
					<el-table-column prop="" label="操作">
						<template #default="scope">
							<el-button color="#0071bb" @click="onShow()">查看</el-button>
						</template>
					</el-table-column>
				</el-table>
				<!-- 底部分页 -->
				<div class="page_number">
					<el-pagination v-model:current-page="pager.currentPage" v-model:page-size="pager.pageSize"
						:disabled="!pager.total" layout="prev, pager, next, jumper,total" :total="pager.total"
						@size-change="handleSizeChange" @current-change="handleCurrentChange" />
				</div>
			</div>
		</div>
		<!-- 详情 -->
		<Detail v-if="show" @close="onClose()" @submit="onSubmit()"></Detail>
	</div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { CaretBottom, Refresh, HelpFilled, Search, RefreshLeft, Plus } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router';
import Detail from './components/detail.vue'
const router = useRouter();
const whole = ref(false)
const tableData = [
	{
		id: '1',
		time: '2024-05-15——11:03:28',
		desc: '多扣款',
		handle_time: '2024-05-15——12:03:28',
		status: '待处理',
		tel: '13306236880'
	},
	{
		id: '2',
		time: '2024-05-15——11:03:28',
		desc: '多扣款',
		handle_time: '2024-05-15——12:03:28',
		status: '处理中',
		tel: '13306236880'
	},
	{
		id: '3',
		time: '2024-05-15——11:03:28',
		desc: '多扣款',
		handle_time: '2024-05-15——12:03:28',
		status: '处理完成',
		tel: '13306236880'
	},
]
// 分页
const pager = ref({
	currentPage: 1,
	pageSize: 10,
	total: 10,
})
// 改变pageSize
const handleSizeChange = (val: number) => {
	console.log(`${val} items per page`)
}
// 改变当前页码 currentPage
const handleCurrentChange = (val: number) => {
	console.log(`current page: ${val}`)
}
// 跳转新增黑名单路由
const onAdd = () => {
	router.push('/add_blacklist');
}
const show = ref<boolean>(false)
// 打开弹窗
const onShow = () => {
	show.value = true
}
// 提交
const onSubmit = () => {
	show.value = false
}
// 关闭
const onClose = () => {
	show.value = false
}
</script>

<style lang="scss" scoped>
.abnormal-page {
	background-color: #fff;
	margin-top: 10px;
	padding: 10px;

	.title {
		font-size: 16px;
	}

	.add {
		margin-bottom: 10px;
	}

	.btn-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-left: 20px;
	}

	.tables {
		margin-top: 20px;

		.check-text {
			color: #0071bb;
			cursor: pointer;
		}

		.handle {
			color: #2686c5;
		}

		.abnormal {
			color: #ff4141;
		}
	}
}</style>